<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            /* 内容区 */
            width: 100px;
            height: 100px;

            background-color: pink;

            /* 边框border
            语法：borer：属性值;
                 属性值：边框线粗细  线条样式 颜色(不区分顺序)
                 线条样式：
                  -solid 实线
                  -dashed虚线
                  -dotted 点线
                  -double 双实线
             */
            /* border: 1px double green; */
            /* 边框可以单独设置不同方向和不同样式 */
            /* border-width: 1px; */
            /* 粗细 */
            /* border-style: double; */
            /* 线条 */
            /* border-color: yellow; */
            /* 颜色 */

            /* 边框 四个方向使用的是方位名词的首字母提示属性
            四方方向：
            top 上
            right 右
            bottom 下
            left 左
            */
            /* border-top-width: 1px; */
            /* 粗细 */
            /* border-top-style: double; */
            /* 线条 */
            /* border-top-color: yellow; */
            /* 颜色 */

            /* 建议某个方向上的边框直接使用简写：borer-方位：值 */
            border-top: 1px yellow double;
            border-right: 1px green double;
            border-bottom: 1px blue double;
            border-left: 1px black double;

            /* 内边距
            也是通过四个方位设置 */
            /* 四个方向内边距相同
            会影响到盒子的整体大小
            */
            /* padding: 10px;
            padding-right: 150px;
            padding-top: 150px;
            padding-bottom: 150px;
            padding-left: 150px; */

            /* 使用值的个数控制方向上的内边距 */
            /* padding: 20px 20px;  上下    左右 */
            /*padding: 20px 30px 20px; 上   左右    下 */
            padding: 10px 20px 30px 40px;
            /* 上 右  下  左 */



            /* 特殊应用  水平居中 */
            margin:0px auto;

        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
            /* 外边距 */
            margin-left: 50px;
            margin-top: 100px;
        }

        .box2 {
            width: 50px;
            height: 50px;
            background-color: yellow;
            margin-left: 50px;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="box">
        55555
    </div>

    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>